<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script th:src="@{/layui/layui.js}" type="text/javascript"></script>
    <link th:href="@{/layui/css/layui.css}" rel="stylesheet" />
    <style>
        .layui-elem-quote{
            border-left: 5px solid #1e9fff;
        }
        .layui-form-select dl dd.layui-this {
            background-color: #1e9fff;
            color: #fff;
        }
    </style>
</head>
<body>
<input th:value="${lng}" id="lng" hidden>
<input th:value="${lat}" id="lat" hidden>
<!--打开地图-->
<div id="mapDiv">
    <div style="margin: 10px;position: absolute;z-index: 999">
        <form class="layui-form" >
            <div class="layui-form-item">
                <div class="layui-inline">
                    <div class="layui-input-inline">
                        <input class="layui-input layui-border-blue" lay-verify="required" name="city" autocomplete="off" placeholder="请输入城市名称">
                    </div>
                    <div class="layui-inline"style="margin-left: -10px">
                        <a class="layui-btn layui-btn-normal" lay-submit="" lay-filter="search">
                            <i class="layui-icon layui-icon-search"></i>

                        </a>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <div id="map" style="height: 600px;z-index: 100"></div>
</div>


<script src="http://api.map.baidu.com/api?v=2.0&ak=tyjXNPZrFk5cyOIwnDErDqUKlyEOIZ1M"></script>
<script>
    var $,lng,lat,map;
    layui.use(['jquery','form','layer'],function(){
        $ = layui.jquery;
        var form = layui.form,layer=layui.layer;
        showMap();

        //
        // $('#cleanBtn').on('click',function(){
        //     $('.layui-form input').val("");
        // })

        // $('#openMap').on('click',function (){
        //     top.layer.open({
        //         title:'经纬度选择',
        //         type:1,
        //         content:$('mapDiv'),
        //         area:['800px','700px'],
        //         btn:['确定选择','取消关闭'],
        //         btn1:function (i,o){
        //
        //         },
        //         minMax:true
        //     })
        // })


        form.on('submit(submitBtn)',function(data){
            var formData = data.field;

        })
        form.on('submit(search)',function (data){
            var city=data.field.city;
            map.clearOverlays();
            var ls=new BMap.LocalSearch(map,{renderOptions:{map:map,autoViewport:true}});
            // ls.setPageCapaciity(100);
            ls.search(city);
        })
    })
    function showMap(){
        lng=$('#lng').val(),lat=$('#lat').val();
        map=new BMap.Map('map');
        var point= new BMap.Point(lng,lat);//设置打开的坐标点
        map.centerAndZoom(point,16);
        map.enableScrollWheelZoom(true);//允许鼠标滚动缩放
        addMark(lng,lat);
        map.addEventListener('click',function (e){

             lng=e.point.lng,
             lat=e.point.lat;
             //清除其他的标注点
            map.clearOverlays();
            addMark(lng,lat);
        })
    }

    function  addMark(lng,lat){
        var point=new BMap.Point(lng,lat);
        var marker=new BMap.Marker(point);
        //添加到地图
        map.addOverlay(marker);
        (function (){
            var thPoint=point;
            marker.addEventListener('click',function (){
                showInfo(this,thePoint);
            })
        })
    }
    //显示信息
    function showInfo(thisMarker,point){
        //
        var contentEditable='<ul style="margin: 0 0 5px 0;padding:0.2em 0">'+
    '<li style="line-height: 30px; font-size: 15px">'+
    '<span style="width: 50px;display: inline-block;">商城名称：某某分销公司南宁总部</span>'+
            '</li>'+
            '<li style="line-height: 30px; font-size: 15px">'+
            '<span style="width: 50px;display: inline-block;"><a href="#"></a></span>'+
            '</li>'+
    '</ul>'
        var infowin=new BMap.InfoWindow(contentEditable);
        thisMarker.openInfoWindows(infowin);
    }

    function  submitBtn(){
        var point ={"lng":lng,"lat":lat};
        let index = parent.layer.getFrameIndex(window.name);
        parent.layer.close(index);//关闭父页面窗口
        return point;
    }

</script>
</body>
</html>
